<!-- 计划 -->
<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="isReadOnly">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">保险</div>
			</div>
		</template>

		<template #default>
			<el-container class="zs-drawer-container">
				<el-scrollbar class="zs-drawer-content">
					<div class="zs-align-center zs-space-bottom" id="sm-drawer-demo-card-01">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">保险时间</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<HsForm :filed-list="instruanceSettingFiledList" ref="infoForm" @selectChange="selectChange" :isDisabled="isReadOnly"></HsForm>
					</div>
				</el-scrollbar>
				<hsDocWrapper :nodeList="curNodeList" />
			</el-container>
		</template>

		<template v-if="handleType != 'info'" #footer>
			<div>
				<el-button class="zs-btn-md zs-btn-primary" @click="doConfirm">提交</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	import { insuranceSettingAddApi, insuranceSettingInfoApi } from '@/api/insurance.js';
	import HsForm from '@/components/hsForm.vue';
	import { instruanceSettingFiledList } from '@/config/form/insurance.js';
	import { ElMessage } from 'element-plus';
	import { ref, reactive, watch, nextTick } from 'vue';
	import { useStore } from 'vuex';
	import { deepClone, monthDayDiff, getDaysDiff } from '@/utils/publicUtils';
	import { judgeDIffTime } from '@/utils/formRules';

	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
	});
	let store = useStore();
	const curDrawerSize = ref(store.state.uiDrawerSize);
	const emit = defineEmits(['close']);
	let isShowDrawer = ref(props.isShow);
	const infoForm = ref();
	const curNodeList = ref([{ name: '保险时间', id: 'sm-drawer-demo-card-01' }]);
	const nowTime = new Date().setHours(0, 0, 0, 0);

	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			isShowDrawer.value = newVal;
			nextTick(() => {
				newVal && ['info', 'edit'].includes(props.handleType) && getInfo(props.currentRow?.id);
				newVal && initRules();
			});
		},
	);

	//详情
	const getInfo = async id => {
		let res = await insuranceSettingInfoApi({ id });
		if (res.data.code !== 200) return;
		let infoData = Object.assign(res.data.data);
		infoData.shengyutianshu = nowTime < infoData.insuranceEndTime ? getDaysDiff(infoData.insuranceEndTime, nowTime) + '天' : '已到期';
		let insuranceDeadline = getInsuranceDeadline(infoData.insuranceStartTime, infoData.insuranceEndTime);
		infoData.baoxianqixian = insuranceDeadline;
		infoForm.value.setFiledVal(infoData);
	};

	//提交
	const doConfirm = async () => {
		let modleInfo = await infoForm.value.validateForm();
		if (!modleInfo) return;
		let params = deepClone(modleInfo);
		params.id = props.currentRow.id;
		let res = await insuranceSettingAddApi(params);
		if (res.data.code == 200) {
			ElMessage({
				message: '提交成功',
				type: 'success',
			});
			isShowDrawer.value = false;
			emit('close', { isShow: false, isRefresh: true });
		}
	};

	//关闭抽屉
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};

	//表单关联
	const selectChange = data => {
		if (data.filedName == 'insuranceStartTime' || data.filedName == 'insuranceEndTime') {
			//保险期限
			let insuranceDeadline = getInsuranceDeadline(data.model.insuranceStartTime, data.model.insuranceEndTime);
			infoForm.value.setFiledSource('baoxianqixian', insuranceDeadline);
			//剩余天数
			if (data.filedName == 'insuranceEndTime') {
				let shengyutianshu = nowTime < data.model.insuranceEndTime ? getDaysDiff(data.model.insuranceEndTime, nowTime) + '天' : '已到期';
				infoForm.value.setFiledSource('shengyutianshu', shengyutianshu);
			}
		}
	};

	//保险期限
	const getInsuranceDeadline = (startTime, endTime) => {
		if (endTime >= startTime) {
			let diffData = monthDayDiff(startTime, endTime);
			let year = diffData.year ? diffData.year + '年' : '';
			let month = diffData.month ? diffData.month + '个月' : '';
			let day = diffData.day ? diffData.day + '天' : '';
			let diffDay = year + month + day;
			return diffDay;
		} else {
			return '';
		}
	};

	//增加校验规则
	const initRules = () => {
		instruanceSettingFiledList.forEach(item => {
			if (item.bindFieldName == 'insuranceStartTime' || item.bindFieldName == 'insuranceEndTime') {
				item.rules = [{ validator: judgeDIffTime(infoForm.value, 'insuranceStartTime', 'insuranceEndTime', '开始时间', '结束时间'), trigger: ['change', 'blur'] }];
			}
		});
	};
</script>
